<template>
  <div>
    <h3>访客记录</h3>
    <el-button type="primary" @click="dialogVisible = true">添加</el-button>
    <el-button type="danger" @click="handleDelete('more')">删除</el-button>
    <el-input
      placeholder="请输入id"
      v-model="id"
      @blur="changsear"
      clearable
      class="inp"
    >
    </el-input>
    <el-button @click="search" type="primary" >搜索</el-button>
    <!-- <el-input
      placeholder="请输入手机号"
      v-model="id"
      @blur="changsear"
      clearable
      class="inp"
    >
    </el-input>
    <el-button @click="search" type="primary" >搜索</el-button>
    <el-input
      placeholder="请输入身份证号"
      v-model="id"
      @blur="changsear"
      clearable
      class="inp"
    >
    </el-input>
    <el-button @click="search" type="primary" >搜索</el-button>
    <el-input
      placeholder="请输入车牌号"
      v-model="id"
      @blur="changsear"
      clearable
      class="inp"
    >
    </el-input>
    <el-button @click="search" type="primary" >搜索</el-button>
    <el-input
      placeholder="请输入进校时间"
      v-model="id"
      @blur="changsear"
      clearable
      class="inp"
    >
    </el-input>
    <el-button @click="search" type="primary" >搜索</el-button>
    <el-input
      placeholder="请输入离校时间"
      v-model="id"
      @blur="changsear"
      clearable
      class="inp"
    >
    </el-input>
    <el-button @click="search" type="primary" >搜索</el-button>
    <el-input
      placeholder="请输入原因"
      v-model="id"
      @blur="changsear"
      clearable
      class="inp"
    >
    </el-input>
    <el-button @click="search" type="primary" >搜索</el-button>
    <el-input
      placeholder="请输入部门"
      v-model="id"
      @blur="changsear"
      clearable
      class="inp"
    >
    </el-input>
    <el-button @click="search" type="primary" >搜索</el-button> -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      v-loading="loading"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="70"> </el-table-column>
      <el-table-column prop="v_id" label="id" width="110"> </el-table-column>
      <el-table-column prop="username" label="姓名" width="110">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="110">
      </el-table-column>
      <el-table-column prop="card" label="身份证号" width="110">
      </el-table-column>
      <el-table-column prop="carnumber" label="车牌号" width="110">
      </el-table-column>
      <el-table-column prop="starttime" label="进校时间" width="110">
      </el-table-column>
      <el-table-column prop="endtime" label="离校时间" width="110">
      </el-table-column>
      <el-table-column prop="reason" label="原因" width="110">
      </el-table-column>
      <el-table-column prop="department" label="部门" width="110">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="handleDelete('row', scope.row.v_id)"
            >删除</el-button
          >
          <el-button
            type="primary"
            @click="handleEdit(scope.row, scope.row.v_id)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.page"
      :page-sizes="[5, 10, 15, 50]"
      :page-size="pages.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 添加 -->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="访客名称"
          placeholder="请输入访客名称"
          prop="username"
        >
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号" placeholder="请输入手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" placeholder="请输入身份证号" prop="card">
          <el-input v-model="ruleForm.card"></el-input>
        </el-form-item>
        <el-form-item
          label="车牌号"
          placeholder="请输入车牌号"
          prop="carnumber"
        >
          <el-input v-model="ruleForm.carnumber"></el-input>
        </el-form-item>
        <!-- <el-form-item label="进校时间" required>
          <el-col :span="11">
            <el-form-item prop="starttime">
              <el-date-picker
                type="date"
                placeholder="选择进校日期"
                v-model="ruleForm.starttime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="starttime">
              <el-time-picker
                placeholder="选择进校时间"
                v-model="ruleForm.starttime"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="离校时间" required>
          <el-col :span="11">
            <el-form-item prop="endtime">
              <el-date-picker
                type="date"
                placeholder="选择离校日期"
                v-model="ruleForm.endtime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endtime">
              <el-time-picker
                placeholder="选择离校时间"
                v-model="ruleForm.endtime"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item> -->
        <el-form-item label="进校原因" placeholder="请输入进校原因" prop="reason">
          <el-input v-model="ruleForm.reason"></el-input>
        </el-form-item>
        <el-form-item label="部门" placeholder="请输入部门" prop="department">
          <el-input v-model="ruleForm.department"></el-input>
        </el-form-item>
          <el-upload
          name="file"
          action="http://121.42.230.80/api/visit/upload"
          list-type="picture-card"
          :headers="headers"
          :on-success="chec"
          :auto-upload="true"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisibles">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisibled"
      width="80%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="访客名称"
          placeholder="请输入访客名称"
          prop="username"
        >
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号" placeholder="请输入手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" placeholder="请输入身份证号" prop="card">
          <el-input v-model="ruleForm.card"></el-input>
        </el-form-item>
        <el-form-item
          label="车牌号"
          placeholder="请输入车牌号"
          prop="carnumber"
        >
          <el-input v-model="ruleForm.carnumber"></el-input>
        </el-form-item>
        <!-- <el-form-item label="进校时间" required>
          <el-col :span="11">
            <el-form-item prop="starttime">
              <el-date-picker
                type="date"
                placeholder="选择进校日期"
                v-model="ruleForm.starttime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="starttime">
              <el-time-picker
                placeholder="选择进校时间"
                v-model="ruleForm.starttime"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="离校时间" required>
          <el-col :span="11">
            <el-form-item prop="endtime">
              <el-date-picker
                type="date"
                placeholder="选择离校日期"
                v-model="ruleForm.endtime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endtime">
              <el-time-picker
                placeholder="选择离校时间"
                v-model="ruleForm.endtime"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item> -->
        <el-form-item label="原因" placeholder="请输入原因" prop="reason">
          <el-input v-model="ruleForm.reason"></el-input>
        </el-form-item>
        <el-form-item label="部门" placeholder="请输入部门" prop="department">
          <el-input v-model="ruleForm.department"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      image: false,
      disabled: false,
      headers: { token: sessionStorage.getItem("token") },
      loading:true,
      fileList:[],
      id: "",
      v_id: "",
      tableData: [],
      currentPage4: 4,
      pages: {
        pageSize: 8,
        page: 1,
      },
      multipleSelection: [],
      input: "",
      dialogImageUrl: '',
      disabled: false,
      dialogVisibles:false,
      dialogVisible: false,
      dialogVisibled: false,
      dialogVisible: false,
      disabled: false,
      ruleForm: {
        username: "",
        mobile: "",
        card: "",
        carnumber: "",
        starttime: "2022-03-30 12:00:00",
        endtime: "2022-03-30 18:00:00",
        reason: "",
        department: "", //部门
        travelcode: "", //行程码
        healthcode: "", //健康码
        nucleicacid: "", //核酸
        adduserid:""
      },
        total:0,
      rules: {
        username: [
          { required: true, message: "请输入访客名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        card: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
        carnumber: [
          { required: true, message: "请输入车牌号", trigger: "blur" },
        ],
        starttime: [
          {
            type: "date",
            required: true,
            message: "请选择进校日期",
            trigger: "change",
          },
        ],
        starttime: [
          {
            type: "date",
            required: true,
            message: "请选择进校时间",
            trigger: "change",
          },
        ],
        endtime: [
          {
            type: "date",
            required: true,
            message: "请选择进校日期",
            trigger: "change",
          },
        ],
        endtime: [
          {
            type: "date",
            required: true,
            message: "请选择进校时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
      
     chec(response, file) {
      console.log(response, 111);
      console.log(file, 222);
    },
        beforeImageUpload (file) { // 上传文件前的钩子对文件进行校验
          const size = file.size / 1024 < 500
          if (!size) {
          this.$message.error('上传图片大小不能超过 500KB!')
          }
          return size
        },
        uploadFile(file){
        console.log(file.file)
        console.log("uploadFile");
        this.formDate.append('org_files', file.file);
      },
        handleRemove(file, fileList) {
          this.fileList=fileList;
          console.log(this.fileList);
          this.$message({
            type: 'info',
            message: '已删除原有图片',
            duration: 1000
          });
        },
        async handlePreview(file) {
          console.log(file);
          let files = file.name
          // this.dialogImageUrl = file.url;
          this.dialogVisible = true;
          let res = await this.$http.post('/visit/upload',{
            file:files
          })
          console.log(res);
        },
        handleChange(file,fileList){
          // this.fileList=fileList;
        },
















    async search() {
      let res = await this.$http.get("/visit/visituser/show", {
        id: this.id,
      });
      if (res.code == "00000") {
        this.tableData = [];
        this.tableData.push(res.data);
      }
    },
    changsear() {
      if (this.id == "") {
        this.getlist();
      }
    },
    //   列表渲染
    async getlist() {
      let res = await this.$http.get("/visit/visituser/list", {
        pageSize: this.pages.pageSize,
        page: this.pages.page,
      });
      if (res.code == "00000") {
        this.tableData = res.data;
        this.loading=false;
        this.total = res.total;
      }
    },
    // 修改
    async Edit() {
      let res = await this.$http.post("/visit/visituser/edit", {
        id: this.v_id,
        formdata: this.ruleForm,
      });
      console.log(res);
      if (res.code == "00000") {
        this.dialogVisibled = false;
        this.getlist();
        this.ruleForm = {}
      }
    },
    handleEdit(row, v_id) {
      this.v_id = v_id;
      this.ruleForm = row;
      this.dialogVisibled = true;
    },
    //    删除
    handleDelete(type, id) {
      if (type === "more") {
        if (this.multipleSelection.length === 0) {
          return this.$message.error("请勾选要删除的数据");
        }
        let arr = [];
        this.multipleSelection.forEach((item) => {
          arr.push(item.v_id);
        });
        id = arr;
      }

      //把批量删除的item_id 传给后台
      this.$confirm("此操作将永久删除这条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$http
            .get("/visit/visituser/del", { v_id: id })
            .then((res) => {
              console.log(res);
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getlist();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async submitForm() {
      let res = await this.$http.post("/visit/visituser/add", {
        username: this.ruleForm.username,
        mobile: this.ruleForm.mobile,
        card: this.ruleForm.card,
        carnumber: this.ruleForm.carnumber,
        //   "starttime": this.ruleForm.starttime,
        //   "endtime": this.ruleForm.endtime,
        reason: this.ruleForm.reason,
        department: this.ruleForm.department,
         adduserid:JSON.parse(sessionStorage.getItem('user')).admin_id
      });
      if (res.code == "00000") {
        this.getlist();
        this.dialogVisible = false;
        this.ruleForm = {};
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
     handleSizeChange(val) {
        this.pages.pageSize = val
        this.getlist()
      },
      handleCurrentChange(val) {
         this.pages.page = val
         this.getlist()
      }
  },
};
</script>

<style>
.inp {
  width: 160px;
  height: 30px;
  margin-left: 20px;
  margin-right: 10px;
}
h3 {
  font-size: 28px;
}
el-button{
  width: 100px;
}
</style>